<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: sun
 * @Date: 2022-03-14 23:12:24
-->
<template>
  <div class="home-container container">
    <img src="@/assets/imgs/pic/5.png" class="article-pic" />
    <p
      class="hot"
      @click="jump(item.type, item)"
      v-for="(item, index) in data"
      :key="index"
    ></p>
    <aside v-if="current && current.type != 3">
      <section class="box">
        <span class="text" v-if="current.text">{{ current.text }}</span>
        <img :src="current.img" class="wx-img" v-if="current.img" />
        <span class="closeBtn" @click="closeFn()"></span>
      </section>
    </aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: null,
      data: [
        { type: 2, img: require('../../assets/imgs/w-1.png') },
        {
          type: 3,
          url:
            'https://pro.m.jd.com/mall/active/aR867ENZvvSbPs6pu1dr8VGp9ik/index.html',
        },
        {
          type: 3,
          url:
            'https://weixin.1919.cn/b2c1919/#/singlepage?id=1030599219144212480',
        },

        {
          type: 3,
          url:
            'https://mst.vip.com/8bE48d55DsHEoB2xqlJsPQ.php?wapid=mst_100064756&_src=mst&extra_banner=115064756&nova=1&nova_platform=1&mst_page_type=guide',
        },

        {
          type: 3,
          url: 'https://shop.m.jd.com/?shopId=38797',
        },
        {
          type: 3,
          url: 'https://cuxiao.m.suning.com/scms/618manghe.html?isSCMS=1',
        },
        {
          type: 3,
          url:
            'https://mp.weixin.qq.com/s?__biz=MzI5MzM5NTA2OQ==&mid=2247640429&idx=1&sn=e2ae06aa71991c38f6fd56a76f4e9236&chksm=ec7e2a7fdb09a369a59a6b8b900551f24be99779d4c3fcaa8c89992f10a223dce3644c9da529&token=549740786&lang=zh_CN#rd',
        },
        { type: 2, img: require('../../assets/imgs/w-4.png') },
        {
          type: 3,
          url:
            'https://shop41176557.m.youzan.com/v2/feature/QiwMXW8nvu?shopAutoEnter=1&kdt_id=40984389',
        },
        { type: 2, img: require('../../assets/imgs/w-2.png') },
        {
          type: 3,
          url:
            'https://h5.shyhhema.com/down/app.html?nativeurl=wdkhema%3A%2F%2Fmain%3Furl%3Dhttps%253A%252F%252Fpages.tmall.com%252Fwow%252Fh%252Fact%252Frax%252Fmanual10251653625879662%253Fdsl%253Drax%2526_hema_title_bar%253Dfalse%2526pageId%253D98988%2526merchantCode%253DHM%2526siteCode%253DHM_8_143aa52f99f84e41930ed4dc3316c674_3%2526renderChannelCode%253DHM',
        },
        {
          type: 3,
          url: 'https://mp.weixin.qq.com/s/YS3iEaFDVAIxFxwlaJyRtA',
        },
        {
          type: 3,
          url: 'https://mo.m.tmall.com/page/4587455?shop_id=152303815',
        },
        {
          type: 3,
          url:
            'https://prom.m.gome.com.cn/gcms/MobsaleAdk8nhee5EU.html?stid=ACCH',
        },
        {
          type: 3,
          url: 'weixin://dl/business/?t=HlFMhko9pOq',
        },
        {
          type: 3,
          url: 'https://tms.codoon.com/cms/pro/1652238461133Hs2HlA.html',
        },
        {
          type: 3,
          url:
            'https://market.m.taobao.com/app/tb-source-app/shopact/pages/index?wh_weex=true&pathInfo=shop/activity&userId=61744522&shopId=35039020&pageId=341290420&alisite=true',
        },
        {
          type: 3,
          url:
            'https://shop.m.jd.com/?shopId=10059439&utm_source=iosapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL&ad_od=share&gx=RnFky2YNb2WLn9QUqIZzXmjWc7UZWPE',
        },
        {
          type: 3,
          url:
            'https://contents.ctrip.com/activitysetupapp/mkt/index/cdwgj?from_native_page=1&from_uuid=FEDA3FDC05A1B63F48FCECE38E9F2019&s_guid=B96FBF8D-4A2C-48F4-A4C9-D9AF29A52941',
        },
        {
          type: 3,
          url: 'http://tg.zazhipu.com/index.php?s=/index/computer.html',
        },
        { type: 2, img: require('../../assets/imgs/w-3.png') },
      ],
    };
  },
  methods: {},
  mounted() {},
  methods: {
    jump(type, item) {
      this.current = item;
      if (type != 3) {
        return;
      }
      location.href = item.url;
    },
    closeFn() {
      this.current = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  margin-bottom: 100px;
  position: relative;
  p.hot {
    width: 90%;
    left: 5%;
    height: 5rem;
    position: absolute;
    z-index: 1;
    top: 10rem;
    // background: red;
    &:nth-child(3) {
      top: 16rem;
    }
    &:nth-child(4) {
      top: 24rem;
    }
    &:nth-child(5) {
      top: 30.8rem;
    }
    &:nth-child(6) {
      top: 38rem;
    }
    &:nth-child(7) {
      top: 44rem;
    }
    &:nth-child(8) {
      top: 50rem;
    }
    &:nth-child(9) {
      top: 56rem;
    }
    &:nth-child(10) {
      top: 63.2rem;
    }
    &:nth-child(11) {
      top: 69rem;
    }
    &:nth-child(12) {
      top: 74.6rem;
    }
    &:nth-child(13) {
      top: 81.5rem;
    }
    &:nth-child(14) {
      top: 88rem;
    }
    &:nth-child(15) {
      top: 95rem;
    }
    &:nth-child(16) {
      top: 101.5rem;
    }
    &:nth-child(17) {
      top: 108rem;
    }
    &:nth-child(18) {
      top: 114rem;
    }
    &:nth-child(19) {
      top: 120rem;
    }
    &:nth-child(20) {
      top: 126rem;
    }
    &:nth-child(21) {
      top: 132rem;
    }
    &:nth-child(22) {
      top: 139rem;
    }
  }
}
</style>
